<template>
  <cj-popup v-model="isShow" @closed="closed" class="sec-popup">
    <article class="c-ww400" >
      <img class="c-w100" id="collagePosterImg" src="" alt="" />
      <div class="c-fs20 c-fc-white c-textAlign-c c-mt16">长按图片或点击右上角的【· · ·】邀请好友参团</div>
    </article>
  </cj-popup>
</template>

<script>
import { Json2canvas } from '@/utils/json2image.js';
import { getInviteCollageJson } from '@/utils/canvasJson/inviteCollageJson.js';
import qr from "@/utils/qr.js";
import { memberIndexMixin } from "@/mixin/memberIndex.js";

export default {
  mixins: [memberIndexMixin],
  props: {
    collageInfo: {
      type: Object,
      default:() => {
        return {

        }
      }
    }
  },
  data() {
    return {
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      isShow: false,
    }
  },
  mounted() {
    this.initJson2image();
  },
  beforeDestroy() {
    this.destroyJson2image();
    this.isShow = false;
  },
  methods: {
    closed() {
      this.$loading.hide();
    },
    public_open(info) {
      this._prodId = info.id;
      this._isReceivedStudy = info.isReceivedStudy || 0;
      this.$loading.show({
        text: '海报生成中'
      });
      this.__certInfo = null;
      this._canvasWidth = 750;
      this._canvasHeight = 1334;
      this.getCertofocateInfo();
    },
    getCertofocateInfo() {
      let nickname = localStorage.getItem("userName")
      let headimgurl = localStorage.getItem("userHeadImg")
      let bgImgUrl = 'https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/14_material_admin/image/public/images/example-images/collage/collagePosteBg.png'
      let logoUrl = 'https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/14_material_admin/image/public/images/example-images/collage/collageLogo.png'

      // 获取需要的数据参数
      const { ckForm, isCaptain, clustering, localUrl, lastTime, prodName, cover, playersPrice, prodPrice, courseType} = this.collageInfo

      this.qrUrl = qr.getQrUrl({ url: localUrl, size: 120 });
      let prodTypeName = ckForm == global.ckFrom.course ? global.prodCourseType[courseType] : global.prodMapType[ckForm];
      let instruction = this.companyAuth.instruction;

      let now = new Date().getTime();
      let timeT = lastTime.replace(/-/g, '/')
      let finshTime = new Date(timeT).getTime();
      let lastTimeTemp = (finshTime - now) / 1000;
      const hour = this.formateH(lastTimeTemp);
      const hourT = hour > 0 ? hour + '小时' : '';
      const mins = this.formateM(lastTimeTemp);
      const minsT = mins > 0 ? mins + '分钟' : '';
      const secs = parseInt(lastTimeTemp % 60);
      const secsT = secs > 0 ? secs + '秒' : '';
      let lastTimeShow = hourT + minsT + secsT;
      this._cardInfo = {
        nickname,
        headimgurl,
        title: prodName,
        bgImgUrl,
        logoUrl,
        cover,
        playersPrice, // 团员价格
        prodPrice, // 原价
        prodTypeName,
        qrCodeUrl: this.qrUrl,
        lastTime: lastTimeShow,
        isCaptain,
        instruction,
        clustering, // 成团人数
      }

      this.resetCanvasSize();
      this.getCardImg();
    },
    resetCanvasSize() {
      if (this._json2image) {
        this._json2image.resetCanvasSize(this._canvasWidth, this._canvasHeight);
      }
    },
    async getCardImg() {
      if (!this._json2image) {
        return;
      }
      let data = [];

      let res = '';
      try {
        await this._json2image.init();
        data = getInviteCollageJson(this._cardInfo, this._json2image);
        await this._json2image.initJson(data);
        await this._json2image.startDraw();
        res = await this._json2image.toDataUrl();
      } catch (error) {
        this.$loading.hide();
      }
      if (!res) {
        this.$loading.hide();
        return;
      }
      this.isShow = true;
      let ig = document.getElementById('collagePosterImg');
      ig.setAttribute('src', res);
      this.$loading.hide();
    },
    // 设置大小
    initJson2image() {
      this._json2image = new Json2canvas();
    },
    // 销毁
    destroyJson2image() {
      if (this._json2image) {
        this._json2image.destroy();
      }
    },
  }
}
</script>
<style scoped>
.sec-popup /deep/ {
  background-color: transparent;
}
</style>
